<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%@ page isELIgnored="false" %>  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>GTD</title>
<jsp:include page="../../../../public/header.jsp"/>
</head>
<body>
	<jsp:include page="../../../../public/nav.jsp"/>
	<div>
		<div class="jumbotron" >
			<p style="text-align: center;">用户中心!</p>
		</div>
	</div>
	<!-- start左边菜单 -->
	<jsp:include page="../../../../public/usersLeft.jsp"></jsp:include>
	<!-- end左边菜单 -->
      <div class="col-xs-9">
      		<ol class="breadcrumb">
			  <li><a href="/users/index.html">用户中心</a></li>
			  <li><a href="#">我的工具</a></li>
			  <li class="active"><a href="${href }">${data.name }</a></li>
			  <li class="active">步骤</li>
			</ol>
			<a href="/users/work/gtd/step/add.html?gid=${data.id }" type="button" class="btn btn-success">添加步骤</a>
			<jsp:include page="../public/nav.jsp"/>
			<table class="table" id="datas">
			  <thead>
			  	<th>#</th>
			  	<th>名字</th>
			  	<th align="center">预计开始时间</th>
			  	<th align="center">预计结束时间</th>
			  	<th>操作</th>
			  </thead>
			  <tbody id="body">
			  	
			  </tbody>
			</table>
			<nav aria-label="Page navigation">
			  <ul id="page" class="pagination">
			  </ul>
			</nav>
      </div>
      <div class="clearfix"></div>
	<jsp:include page="../../../../public/footer2.jsp"/>
</body>
	<script type="text/javascript">
		$(function(){
			function initBody(datas){
				var body = "";
				for(var i = 0; i < datas.length;i++){
					var model = datas[i];
					var status = '正在进行';
					
					if(model.doing == 'T'){
						status = "正在进行";
					}else if(model.done == "T"){
						status = "已经完成";
					}else if(model.gone == "T"){
						status = "已经逾期";
					}else{
						status = "还未开始";
					}
					
					body += "<tr>";
					body+="<td>"+i+"</td>";//序号
				  	body+='<td><a href="/users/work/gtdCheck.html?id='+model.id+'">'+model.name+'</td>';//名字
				  	
				  	if(model.startDate !== null && typeof(model.startDate) !== 'undefined' &&model.startDate!=undefined){
				  		//body+='<td>'+new Date(model.startdate.time).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")+'</td>';
				  	}else{
			  			body+='<td></td>';
			  		}
				  	if(model.endDate !== null &&  typeof(model.enddate) != 'undefined' && model.enddate!= undefined){	
				  		body+='<td>'+new Date(model.endDate.time).toLocaleString().replace(/年|月/g, "-").replace(/日/g, " ")+'</td>';
				  	}else body+='<td></td>';
				  	body+='<td>'+status+'</td>';
				  		
				  	body+='<td><a href="/users/work/gtd/step/index.html?id='+model.id+'" class=" btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-th" aria-hidden="true">完成</span></a>';
				  	body+='<a href="/users/work/gtd/step/gtdModify.html?id='+model.id+'" class="btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-pencil" aria-hidden="true">修改</span></a>';
				  	body+='<button onclick="del('+model.id+')" type="button" class=" btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-remove" aria-hidden="true">删除</span></button></td>';
				  	body+= "</tr>"
				}
				$("#body").html(body);
			}
			function getDataList(url,data){
				var params = {url:url,data:data,type:'post',dataType:'json',success:function(result){
					console.log(result);
					if(result.code == 0){
						initBody(result.models);
						initBody(result.models);
						var page = result.page;
						console.log(page);
						cur = page.cur;
						total = page.total;
						var pageContent = '<li> <a id="prev" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>';
						for( var i = (cur-2>0?cur-2:0); i < cur;i++){
							if(i == cur - 1){
								pageContent += ' <li class="active"><a onclick="page('+(i+1)+')">'+(i+1)+'</a></li>';
							}else
							pageContent += ' <li><a onclick="page('+(i+1)+')">'+(i+1)+'</a></li>';
						}
						if(cur < total){
							pageContent += ' <li><a onclick="page('+(cur+1)+')">'+(cur+1)+'</a></li>';
							for( var i = cur + 2; i < total && i<cur + 4;i++){
								pageContent += ' <li><a onclick="page('+(i+1)+')">'+(i+1)+'</a></li>';
							}
						}
						pageContent += '<li><a id="next" aria-label="Next"><span aria-hidden="true">&raquo;</span></a></li>';
						$("#page").html(pageContent);
						pageClick();
					}else{
						alert(result.msg);
					}
				},error:function(){
					alert("服务器正在维护！");
				}};
				$.ajax(params);
			}
			function initDatas(){
				var url = "/users/work/gtd/step/stepList.html?sid=${data.id}";
				var data = {};
				getDataList(url,data);
			}
			
			initDatas();
			
			
			//--------------------------按钮
		})
		function pageClick(){
			$("#prev").click(function(){
				cur -= 1;
				if(cur <= 0){
					cur = 1;
				}else{
					var url = "/users/gtd.html";
					var data = {cur:cur,pageSize:pageSize};
					getDataList(url,data);
				}
			})
			$("#next").click(function(){
				cur += 1;
				if(total < cur){
					cur -= 1;
				}else{
					var url = "/users/gtd.html";
					var data = {cur:cur,pageSize:pageSize};
					getDataList(url,data);
				}
			})
		}
		function del(id){
			var url = "/users/gtdDel.html";
			$.ajax({url:url,data:{id:id},
				dataType:"json",
				success:function(data){
				alert(data.msg);
			}});
		}
		function page(curr){
			var url = "/users/work/gtd/step/stepList.html?sid=${data.id}";
			var data = {cur:curr,pageSize:pageSize};
			getDataList(url,data);
		}
	</script>
</html>